<template>
  <v-card flat>
    <v-card-text>
      <div>
        <upload :show-file-list="false" :inline="true" @success="handleUploadSuccess">
          <v-btn
            :loading="uploadLoading"
            color="blue-grey"
            class="ma-2 white--text"
            @click="loader = 'loading3'"
          >
            {{ $t('actions.upload') }}
            <v-icon right dark>mdi-cloud-upload</v-icon>
          </v-btn>
          <!-- <el-button type="primary" size="mini">{{ $t('actions.upload') }}</el-button> -->
        </upload>
        <v-btn
          class="ma-2"
          outlined
        >
          下载记录
        </v-btn>
        <v-btn
          class="ma-2"
          color="warning"
          :disabled="!multipleSelection.length"
          @click="handleDelete()"
        >
          {{ $t('actions.delete') }}
        </v-btn>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          align="center"
          width="60">
        </el-table-column>
        <el-table-column
          prop="name"
          label="文件名称"
          width="420">
        </el-table-column>
        <el-table-column
          prop="created_user_name"
          label="上传者"
          width="180">
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="上传时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="click"
          label="下载次数"
          width="140">
        </el-table-column>
        <el-table-column
          prop="name"
          label="操作"
          align="center"
          width="160">
          <template slot-scope="{ row }">
            <v-btn color="warning" class="mr-4" small @click="handleDelete(row.id)">{{ $t('actions.delete') }}</v-btn>
            <v-btn color="primary" small>{{ $t('actions.download') }}</v-btn>
          </template>
        </el-table-column>
      </el-table>
    </v-card-text>
    <v-card-actions>
      <v-spacer/>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getPlanFileList" />
      <v-spacer/>
    </v-card-actions>
  </v-card>
</template>

<script>
import { uploadPlanFile, planFileList, deletePlanFile } from '@/api/plan'
export default {
  activated() {
    this.queryParams.plan_id = this.$route.query.id
    this.getPlanFileList()
  },
  data() {
    return {
      tableData: [{}],
      multipleSelection: [],
      uploadLoading: false,
      loading: false,
      total: 0,
      queryParams: {
        plan_id: undefined,
        page: 1,
        limit: 20
      }
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getPlanFileList(page) {
      this.loading = true
      if (/\d+/.test(page)) {
        this.queryParams.page = page
      }
      planFileList(this.queryParams).then(res => {
        this.total = res.data.count
        this.tableData = res.data.data
      }).finally(() => {
        this.loading = false
      })
    },
    handleDelete(id) {
      let ids
      if(id) {
        ids = [id]
      } else {
        ids = this.multipleSelection.map(item => item.id)
      }
      this.$confirm(this.$t('tips.delete'), this.$t('other.tip'), {
        type: 'warning'
      }).then(() => {
        deletePlanFile({idArr: ids}).then(() => {
          this.$message({
            message: 'success',
            type: 'success'
          })
          this.getPlanFileList()
        })
      })
    },
    handleUploadSuccess({response}) {
      this.uploadLoading = true
      uploadPlanFile({
        plan_id: this.queryParams.plan_id,
        ...response.data
      }).then(res => {
        this.getPlanFileList(1)
      }).finally(() => {
        this.uploadLoading = false
      })
    }
  }
}
</script>

<style>

</style>